<template>
  <div class="content">
    <div class="camera">
      <a-modal
        v-model="user_photo_modal_visable"
        title="人脸对比"
        :footer="null"
        destroyOnClose
        style="margin-top: -12vh;"
      >
        <a-spin>
          <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
          <img :src="user_contrast_face_data" style="width: 100%;height: 100%; max-height:250px;" />
        </a-spin>
      </a-modal>
      <input id="camera" type="file" accept="image/*" capture="user" v-show="false" />
      <input id="add_user_camera" type="file" accept="image/*" capture="user" v-show="false" />
    </div>
    <div class="main">
      <a-card :loading="false" title="信息工坊签到系统" style="text-align: left;height: 90vh">
        <div slot="extra">
          <a-button type="primary" @click="user_add_model_visable = true">加入系统</a-button>
          <a-modal v-model="user_add_model_visable" title="加入系统" destroyOnClose @ok="add_user">
            <a-row :gutter="20">
              <a-col :span="10" style="line-height: 200px;">
                <div class="user_add_avatar" @click="open_photo_shot('add_user_camera')">
                  <a-avatar v-if="user_add_camera_ok" :size="100" :src="user_add_face_data" />
                  <a-avatar v-else :size="100" icon="plus" />
                </div>
              </a-col>
              <a-col :span="13">
                <div class="form">
                  <a-form-model ref="user_add_form_data" :rules="rules" :model="user_add_form_data">
                    <a-form-model-item label="姓名" prop="name">
                      <a-input v-model="user_add_form_data.name" placeholder="您的姓名" />
                    </a-form-model-item>
                    <a-form-model-item label="班级" prop="classRoom">
                      <a-input v-model="user_add_form_data.classRoom" placeholder="您的班级" />
                    </a-form-model-item>
                    <a-form-model-item label="负责项目" prop="targetProject">
                      <a-input v-model="user_add_form_data.targetProject" placeholder="您的负责项目" />
                    </a-form-model-item>
                  </a-form-model>
                </div>
              </a-col>
            </a-row>
          </a-modal>
        </div>
        <div class="head">
          <a-select
            show-search
            size="large"
            placeholder="输入你的姓名缩写"
            option-filter-prop="children"
            style="width: 100%"
            :filter-option="filter_NamesOption"
            @change="change_NamesOption"
            ref="namesSelect"
          >
            <a-select-option
              v-for="(item,index) in user_list_data"
              :key="item.name"
              :value="JSON.stringify(item)"
            >{{item.name}}</a-select-option>
          </a-select>
        </div>
        <div class="info">
          <a-modal v-model="user_info_model_visable" title="信息展示" @ok="open_photo_shot('camera')">
            <a-card title="如果信息无误则签到" :loading="!user_current_choice">
              <a slot="extra" href="#">信息有误</a>
              <a-row :gutter="20">
                <a-col :span="10">
                  <a-avatar :size="100" icon="user" />
                </a-col>
                <a-col :span="13">
                  <div class="text">
                    <a-row :gutter="12">
                      <a-col :span="12">
                        <a-statistic
                          title="姓名"
                          :value="user_current_data.name"
                          valueStyle="font-size: 17px;"
                        />
                      </a-col>
                      <a-col :span="12">
                        <a-statistic
                          title="准备项目"
                          valueStyle="font-size: 17px;"
                          :value="user_current_data.targetProject"
                        />
                      </a-col>
                    </a-row>
                    <a-statistic
                      title="班级"
                      :value="user_current_data.classRoom"
                      valueStyle="font-size: 17px;"
                    />
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-modal>
        </div>
        <div class="statistic">
          <a-table
            :data-source="sign_list_data_statistic"
            :pagination="false"
            style="width: 100%;"
            :locale="{
              emptyText: '暂无统计信息'
            }"
          >
            <a-table-column key="targetProject" title="项目名称" data-index="targetProject" />
            <a-table-column key="num" title="签到数量" data-index="num">
              <template slot-scope="text, record">
                <a-button
                  type="link"
                  style="padding: 0px;"
                  @click="open_project_sign_users_model(record.targetProject)"
                >{{text}}</a-button>
              </template>
            </a-table-column>
          </a-table>
          <a-modal
            v-model="project_sign_users_modal_visable"
            :title="'「' +  project_sign_users_type + '」详细列表'"
            :footer="null"
            destroyOnClose
            style="margin-top: -12vh;"
          >
            <a-list
              item-layout="horizontal"
              :data-source="project_sign_users_data"
              :locale="{
              emptyText: '今天还没有签到的呢'
            }"
              style="overflow: auto;
  height: 43vh;"
            >
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-list-item-meta :description="rTime(item.signDate)">
                  <a slot="title">{{ item.sysUser.name }}</a>
                  <a-avatar
                    slot="avatar"
                  >{{item.signType == 'M' ? '早上' : item.signType == 'A' ? '下午' : '晚上'}}</a-avatar>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-modal>
        </div>
        <div class="today_sign_list">
          <a-card title="签到列表" style="height: 55vh;">
            <a slot="extra" href="#">申诉</a>
            <a-list
              item-layout="horizontal"
              :data-source="sign_list_data"
              :locale="{
              emptyText: '今天还没有签到的呢'
            }"
              style="overflow: auto;
  height: 43vh;"
            >
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-list-item-meta :description="rTime(item.signDate)">
                  <a slot="title">{{ item.sysUser.targetProject + ' / ' + item.sysUser.name }}</a>
                  <a-avatar
                    slot="avatar"
                  >{{item.signType == 'M' ? '早上' : item.signType == 'A' ? '下午' : '晚上'}}</a-avatar>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </div>
      </a-card>
    </div>
    <div class="footer">
      <p style="color:#666">
        © 2021 Powered by KuM /
        <a style="padding: 0px;">获得源码</a>
      </p>
    </div>
  </div>
</template>

<script>
import CameraSdk from "../commons/camera-sdk";
import PinyinMatch from "pinyin-match"
import { NumericInput } from 'numeric-keyboard'
import { Success, Warning } from '@/js/utils/message.js'
import { rTime } from '@/js/utils/time.js'
import { startSign, getUserList, getSignList, addUser } from '@/js/api/index.js'
export default {
  name: "Camera",
  components: {
    NumericInput,
  },
  data () {
    return {
      rTime,
      user_contrast_face_data: "",
      user_add_face_data: "",
      amount: '',
      user_list_data: [],
      sign_list_data: [],
      sign_list_data_statistic: {},
      user_current_choice: false,
      user_current_data: {},
      user_info_model_visable: false,
      user_photo_modal_visable: false,
      user_add_model_visable: false,
      user_add_form_data: {},
      user_add_camera_ok: false,
      project_sign_users_modal_visable: false,
      project_sign_users_type: '云计算',
      project_sign_users_data: [],
      rules: {
        name: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        classRoom: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        targetProject: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
      },
    };
  },
  created () {
    this.get_userList()
    this.get_signList()
  },
  watch: {
  },
  mounted: function () {
    //分别注册「人脸识别」和「加入用户」两个照相机
    let self = this;
    CameraSdk.takePictures("camera", {
      success: res => {
        this.$message.success('正在识别中...');
        self.user_contrast_face_data = res
        this.user_info_model_visable = false
        this.user_photo_modal_visable = true
        self.sign()
        return
      },
      error: res => {
        self.user_contrast_face_data = "";
        self.$message.error(res)
        return
      }
    });
    CameraSdk.takePictures("add_user_camera", {
      success: res => {
        self.user_add_face_data = res
        self.user_add_camera_ok = true
        return
      },
      error: res => {
        self.user_add_face_data = "";
        self.$message.error(res)
        return
      }
    });
  },
  methods: {
    get_userList () {
      getUserList().then(res => {
        this.user_list_data = res.data.data
      })
    },
    get_signList () {
      getSignList().then(res => {
        let data = res.data.data
        this.sign_list_data = data.sign_list
        this.sign_list_data_statistic = data.statistic
      })
    },
    change_NamesOption (value) {
      this.user_current_data = JSON.parse(value)
      this.user_current_choice = true
      this.names_select_open = false
      this.user_info_model_visable = true
    },
    filter_NamesOption (input, option) {
      return (
        PinyinMatch.match(option.componentOptions.children[0].text, input)
      )
    },
    open_photo_shot (id) {
      document.querySelector(`#${id}`).click()
    },
    add_user () {
      this.$refs.user_add_form_data.validate(v => {
        if (v) {
          if (this.user_add_face_data == null || !this.user_add_camera_ok) {
            Warning(this, '请上传图片!')
          } else {
            //todo 校验照片是否存在人脸
            let data = {
              'sysUser': this.user_add_form_data,
              faceData: this.user_add_face_data.substring(23)
            }
            addUser(data).then(res => {
              if (res.data.code == 200) {
                Success(this, '加入成功！')
              }
              this.user_add_model_visable = false
              this.get_userList()

            })


          }
        }
      })

    },
    sign () {
      let data = {
        userId: this.user_current_data.id,
        currentFaceDate: this.user_contrast_face_data.substring(23)
      }
      startSign(data).then(res => {
        if (res.data.code == 200) {
          this.$success({
            title: '签到成功',
            content: (
              <div>
                <p>好好学习天天向上,请不要交头接耳...</p>
              </div>
            )
          })
        } else {
          this.$error({
            title: '签到失败',
            content: '人脸识别失败或图片非即时拍摄...',
          });
        }
        this.user_photo_modal_visable = false
        //刷新签到列表
        this.get_signList()
      })
    },
    open_project_sign_users_model (type) {
      this.project_sign_users_modal_visable = true
      this.project_sign_users_type = type
      let data = []
      this.sign_list_data.forEach(item => {
        if (item.sysUser.targetProject == type) {
          data.push(item)
        }
      })
      console.log(data)
      this.project_sign_users_data = data

    }

  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
.content {
  padding-top: 40px 10px;
}
.info {
  margin-top: 10px;
  width: 100%;
}
.camera {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.ant-statistic-content {
  font-size: 20px;
}
.numeric-keyboard {
  font-size: 1.3em;
}
.ant-card-body {
  padding: 10px;
  height: 100vh;
}
.camera h1,
.camera h2 {
  width: 100%;
}

.preview-img {
  width: 100%;
  height: 300px;
}

.preview-img img {
  width: 300px;
  height: 300px;
}
.operation {
  text-align: center;
  margin-top: 20px;
}
.operation .ant-btn {
  width: 100px;
  height: 100px;
  font-size: 3rem;
}
.statistic {
  text-align: center;
  border: 1px solid #e8e8e8;
  padding: 5px;
  margin-bottom: 10px;
  justify-content: center;
  display: flex;
}
</style>
